<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-tabs>
        <el-tab-pane label="个人详情">
          <!-- 个人信息 -->
          <el-form
            ref="fm"
            :model="formData"
            :rules="rules"
            label-width="100px"
          >
            <!-- 用户名修改-->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="formData.username" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 手机号-->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="formData.mobile" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 入职时间 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker
                    v-model="formData.timeOfEntry"
                    type="date"
                    class="inputW"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 员工照片 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="员工头像">
                  <!-- 放置上传图片 -->
                  <UplodingImg
                    :staff-photo="formData.staffPhoto"
                    @change-photo="changePhoto"
                  ></UplodingImg>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 保存个人信息 -->
            <el-row class="inline-info" type="flex" justify="center">
              <el-col :span="12">
                <el-button type="primary" @click="updateUser"
                  >保存更新</el-button
                >
                <el-button @click="$router.back()">返回</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- card body -->
    </el-card>
  </div>
</template>

<script>
// 导入获取后台员工信息的接口
import { getUserDetailByIdAPI } from "@/api/user";
// 导入更新员工信息的接口
import { saveUserDetailByIdAPI } from "@/api/employees";
export default {
  data() {
    return {
      // 表单变量
      formData: {
        username: "",
        timeOfEntry: "",
        // 头像
        staffPhoto: "",
      },
      rules: {
        username: [
          {
            required: true,
            min: 3,
            max: 10,
            message: "用户名必填！",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    // 拿到员工id
    // params.参数名和动态路由的：参数名一一对应
    // console.log(this.$route.params.id);
    this.getInfoid();
  },
  methods: {
    // 修改头像地址
    changePhoto(newUrl) {
      console.log("云图片地址：", newUrl);
      this.formData.staffPhoto = newUrl;
    },
    // 点击流程更新
    updateUser() {
      // 兜底校验
      this.$refs.fm.validate(async (isok) => {
        if (isok) {
          // 校验通过
          await saveUserDetailByIdAPI(this.formData);
          this.$message.success("更新成功");
          //   更新vuex当前登录人的信息
          // this.$store.state.user.userInfo.id 登录人id
          // this.formData.id  正在修改的信息
          // 如果正在修改的id相等，需要更新用户头像
          if (this.$store.state.user.userInfo.id === this.formData.id) {
            this.$store.dispatch("user/getUserInfoAction");
          }
        }
      });
    },
    // 获取员工信息详情
    async getInfoid() {
      const res = await getUserDetailByIdAPI(this.$route.params.id);
      console.log(res);
      if (!res.staffPhoto) {
        // 不存在情况下追加staffPhoto属性，避免响应式失效
        res.staffPhoto = "";
      }
      this.formData = res;
    },
  },
};
</script>
 
<style lang="sass" scoped>
</style>